<template>
  <div class="training-evaluate">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训评估</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="evaluateForm" :rules="rules" ref="evaluateForm" label-width="120px">
        <el-card class="evaluate-section">
          <div slot="header">
            <span>培训效果评估</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="evaluateForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估方式" prop="evaluateType">
                <el-select v-model="evaluateForm.evaluateType" multiple placeholder="请选择评估方式">
                  <el-option label="问卷调查" value="questionnaire"></el-option>
                  <el-option label="面谈反馈" value="interview"></el-option>
                  <el-option label="实际应用" value="practical"></el-option>
                  <el-option label="数据分析" value="data"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="评估维度" prop="dimensions">
            <el-checkbox-group v-model="evaluateForm.dimensions">
              <el-checkbox label="satisfaction">培训满意度</el-checkbox>
              <el-checkbox label="knowledge">知识掌握</el-checkbox>
              <el-checkbox label="skills">技能提升</el-checkbox>
              <el-checkbox label="application">实际应用</el-checkbox>
              <el-checkbox label="performance">工作表现</el-checkbox>
              <el-checkbox label="roi">投资回报</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估指标</span>
          </div>

          <el-form-item label="评估指标" prop="indicators">
            <div v-for="(item, index) in evaluateForm.indicators" :key="index" class="indicator-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="指标名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="item.type" placeholder="指标类型">
                    <el-option label="定量" value="quantitative"></el-option>
                    <el-option label="定性" value="qualitative"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.description" placeholder="指标说明"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeIndicator(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addIndicator">添加评估指标</el-button>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估结果</span>
          </div>

          <el-form-item label="总体评价" prop="overallRating">
            <el-rate v-model="evaluateForm.overallRating" :colors="colors"></el-rate>
          </el-form-item>

          <el-form-item label="主要成效" prop="achievements">
            <el-input type="textarea" v-model="evaluateForm.achievements" :rows="4" placeholder="请描述培训的主要成效"></el-input>
          </el-form-item>

          <el-form-item label="存在问题" prop="problems">
            <el-input type="textarea" v-model="evaluateForm.problems" :rows="4" placeholder="请描述存在的问题"></el-input>
          </el-form-item>

          <el-form-item label="改进建议" prop="suggestions">
            <el-input type="textarea" v-model="evaluateForm.suggestions" :rows="4" placeholder="请提出改进建议"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">提交评估</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingEvaluate',
  data() {
    return {
      evaluateForm: {
        trainingProject: '',
        evaluateType: [],
        dimensions: [],
        indicators: [
          {
            name: '',
            type: 'quantitative',
            description: ''
          }
        ],
        overallRating: 0,
        achievements: '',
        problems: '',
        suggestions: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        evaluateType: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
        dimensions: [{ required: true, message: '请选择评估维度', trigger: 'change' }],
        overallRating: [{ required: true, message: '请进行总体评价', trigger: 'change' }],
        achievements: [{ required: true, message: '请描述主要成效', trigger: 'blur' }]
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ]
    }
  },
  methods: {
    addIndicator() {
      this.evaluateForm.indicators.push({
        name: '',
        type: 'quantitative',
        description: ''
      })
    },
    removeIndicator(index) {
      this.evaluateForm.indicators.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.evaluateForm.validate(valid => {
        if (valid) {
          // TODO: 提交评估信息
          this.$message.success('培训评估提交成功')
          this.$router.push('/main/renshi/peixun/process')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-evaluate {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .evaluate-section {
    margin-bottom: 20px;
  }

  .indicator-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
  <div class="training-evaluate">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训评估</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="evaluateForm" :rules="rules" ref="evaluateForm" label-width="120px">
        <el-card class="evaluate-section">
          <div slot="header">
            <span>培训效果评估</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="evaluateForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估方式" prop="evaluateType">
                <el-select v-model="evaluateForm.evaluateType" multiple placeholder="请选择评估方式">
                  <el-option label="问卷调查" value="questionnaire"></el-option>
                  <el-option label="面谈反馈" value="interview"></el-option>
                  <el-option label="实际应用" value="practical"></el-option>
                  <el-option label="数据分析" value="data"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="评估维度" prop="dimensions">
            <el-checkbox-group v-model="evaluateForm.dimensions">
              <el-checkbox label="satisfaction">培训满意度</el-checkbox>
              <el-checkbox label="knowledge">知识掌握</el-checkbox>
              <el-checkbox label="skills">技能提升</el-checkbox>
              <el-checkbox label="application">实际应用</el-checkbox>
              <el-checkbox label="performance">工作表现</el-checkbox>
              <el-checkbox label="roi">投资回报</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估指标</span>
          </div>

          <el-form-item label="评估指标" prop="indicators">
            <div v-for="(item, index) in evaluateForm.indicators" :key="index" class="indicator-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="指标名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="item.type" placeholder="指标类型">
                    <el-option label="定量" value="quantitative"></el-option>
                    <el-option label="定性" value="qualitative"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.description" placeholder="指标说明"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeIndicator(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addIndicator">添加评估指标</el-button>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估结果</span>
          </div>

          <el-form-item label="总体评价" prop="overallRating">
            <el-rate v-model="evaluateForm.overallRating" :colors="colors"></el-rate>
          </el-form-item>

          <el-form-item label="主要成效" prop="achievements">
            <el-input type="textarea" v-model="evaluateForm.achievements" :rows="4" placeholder="请描述培训的主要成效"></el-input>
          </el-form-item>

          <el-form-item label="存在问题" prop="problems">
            <el-input type="textarea" v-model="evaluateForm.problems" :rows="4" placeholder="请描述存在的问题"></el-input>
          </el-form-item>

          <el-form-item label="改进建议" prop="suggestions">
            <el-input type="textarea" v-model="evaluateForm.suggestions" :rows="4" placeholder="请提出改进建议"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">提交评估</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingEvaluate',
  data() {
    return {
      evaluateForm: {
        trainingProject: '',
        evaluateType: [],
        dimensions: [],
        indicators: [
          {
            name: '',
            type: 'quantitative',
            description: ''
          }
        ],
        overallRating: 0,
        achievements: '',
        problems: '',
        suggestions: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        evaluateType: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
        dimensions: [{ required: true, message: '请选择评估维度', trigger: 'change' }],
        overallRating: [{ required: true, message: '请进行总体评价', trigger: 'change' }],
        achievements: [{ required: true, message: '请描述主要成效', trigger: 'blur' }]
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ]
    }
  },
  methods: {
    addIndicator() {
      this.evaluateForm.indicators.push({
        name: '',
        type: 'quantitative',
        description: ''
      })
    },
    removeIndicator(index) {
      this.evaluateForm.indicators.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.evaluateForm.validate(valid => {
        if (valid) {
          // TODO: 提交评估信息
          this.$message.success('培训评估提交成功')
          this.$router.push('/main/renshi/peixun/process')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-evaluate {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .evaluate-section {
    margin-bottom: 20px;
  }

  .indicator-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
 
 
 
 
  <div class="training-evaluate">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训评估</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="evaluateForm" :rules="rules" ref="evaluateForm" label-width="120px">
        <el-card class="evaluate-section">
          <div slot="header">
            <span>培训效果评估</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="evaluateForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估方式" prop="evaluateType">
                <el-select v-model="evaluateForm.evaluateType" multiple placeholder="请选择评估方式">
                  <el-option label="问卷调查" value="questionnaire"></el-option>
                  <el-option label="面谈反馈" value="interview"></el-option>
                  <el-option label="实际应用" value="practical"></el-option>
                  <el-option label="数据分析" value="data"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="评估维度" prop="dimensions">
            <el-checkbox-group v-model="evaluateForm.dimensions">
              <el-checkbox label="satisfaction">培训满意度</el-checkbox>
              <el-checkbox label="knowledge">知识掌握</el-checkbox>
              <el-checkbox label="skills">技能提升</el-checkbox>
              <el-checkbox label="application">实际应用</el-checkbox>
              <el-checkbox label="performance">工作表现</el-checkbox>
              <el-checkbox label="roi">投资回报</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估指标</span>
          </div>

          <el-form-item label="评估指标" prop="indicators">
            <div v-for="(item, index) in evaluateForm.indicators" :key="index" class="indicator-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="指标名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="item.type" placeholder="指标类型">
                    <el-option label="定量" value="quantitative"></el-option>
                    <el-option label="定性" value="qualitative"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.description" placeholder="指标说明"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeIndicator(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addIndicator">添加评估指标</el-button>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估结果</span>
          </div>

          <el-form-item label="总体评价" prop="overallRating">
            <el-rate v-model="evaluateForm.overallRating" :colors="colors"></el-rate>
          </el-form-item>

          <el-form-item label="主要成效" prop="achievements">
            <el-input type="textarea" v-model="evaluateForm.achievements" :rows="4" placeholder="请描述培训的主要成效"></el-input>
          </el-form-item>

          <el-form-item label="存在问题" prop="problems">
            <el-input type="textarea" v-model="evaluateForm.problems" :rows="4" placeholder="请描述存在的问题"></el-input>
          </el-form-item>

          <el-form-item label="改进建议" prop="suggestions">
            <el-input type="textarea" v-model="evaluateForm.suggestions" :rows="4" placeholder="请提出改进建议"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">提交评估</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingEvaluate',
  data() {
    return {
      evaluateForm: {
        trainingProject: '',
        evaluateType: [],
        dimensions: [],
        indicators: [
          {
            name: '',
            type: 'quantitative',
            description: ''
          }
        ],
        overallRating: 0,
        achievements: '',
        problems: '',
        suggestions: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        evaluateType: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
        dimensions: [{ required: true, message: '请选择评估维度', trigger: 'change' }],
        overallRating: [{ required: true, message: '请进行总体评价', trigger: 'change' }],
        achievements: [{ required: true, message: '请描述主要成效', trigger: 'blur' }]
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ]
    }
  },
  methods: {
    addIndicator() {
      this.evaluateForm.indicators.push({
        name: '',
        type: 'quantitative',
        description: ''
      })
    },
    removeIndicator(index) {
      this.evaluateForm.indicators.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.evaluateForm.validate(valid => {
        if (valid) {
          // TODO: 提交评估信息
          this.$message.success('培训评估提交成功')
          this.$router.push('/main/renshi/peixun/process')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-evaluate {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .evaluate-section {
    margin-bottom: 20px;
  }

  .indicator-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
  <div class="training-evaluate">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训评估</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="evaluateForm" :rules="rules" ref="evaluateForm" label-width="120px">
        <el-card class="evaluate-section">
          <div slot="header">
            <span>培训效果评估</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="evaluateForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估方式" prop="evaluateType">
                <el-select v-model="evaluateForm.evaluateType" multiple placeholder="请选择评估方式">
                  <el-option label="问卷调查" value="questionnaire"></el-option>
                  <el-option label="面谈反馈" value="interview"></el-option>
                  <el-option label="实际应用" value="practical"></el-option>
                  <el-option label="数据分析" value="data"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="评估维度" prop="dimensions">
            <el-checkbox-group v-model="evaluateForm.dimensions">
              <el-checkbox label="satisfaction">培训满意度</el-checkbox>
              <el-checkbox label="knowledge">知识掌握</el-checkbox>
              <el-checkbox label="skills">技能提升</el-checkbox>
              <el-checkbox label="application">实际应用</el-checkbox>
              <el-checkbox label="performance">工作表现</el-checkbox>
              <el-checkbox label="roi">投资回报</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估指标</span>
          </div>

          <el-form-item label="评估指标" prop="indicators">
            <div v-for="(item, index) in evaluateForm.indicators" :key="index" class="indicator-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="指标名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="item.type" placeholder="指标类型">
                    <el-option label="定量" value="quantitative"></el-option>
                    <el-option label="定性" value="qualitative"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.description" placeholder="指标说明"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeIndicator(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addIndicator">添加评估指标</el-button>
          </el-form-item>
        </el-card>

        <el-card class="evaluate-section">
          <div slot="header">
            <span>评估结果</span>
          </div>

          <el-form-item label="总体评价" prop="overallRating">
            <el-rate v-model="evaluateForm.overallRating" :colors="colors"></el-rate>
          </el-form-item>

          <el-form-item label="主要成效" prop="achievements">
            <el-input type="textarea" v-model="evaluateForm.achievements" :rows="4" placeholder="请描述培训的主要成效"></el-input>
          </el-form-item>

          <el-form-item label="存在问题" prop="problems">
            <el-input type="textarea" v-model="evaluateForm.problems" :rows="4" placeholder="请描述存在的问题"></el-input>
          </el-form-item>

          <el-form-item label="改进建议" prop="suggestions">
            <el-input type="textarea" v-model="evaluateForm.suggestions" :rows="4" placeholder="请提出改进建议"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">提交评估</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingEvaluate',
  data() {
    return {
      evaluateForm: {
        trainingProject: '',
        evaluateType: [],
        dimensions: [],
        indicators: [
          {
            name: '',
            type: 'quantitative',
            description: ''
          }
        ],
        overallRating: 0,
        achievements: '',
        problems: '',
        suggestions: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        evaluateType: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
        dimensions: [{ required: true, message: '请选择评估维度', trigger: 'change' }],
        overallRating: [{ required: true, message: '请进行总体评价', trigger: 'change' }],
        achievements: [{ required: true, message: '请描述主要成效', trigger: 'blur' }]
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ]
    }
  },
  methods: {
    addIndicator() {
      this.evaluateForm.indicators.push({
        name: '',
        type: 'quantitative',
        description: ''
      })
    },
    removeIndicator(index) {
      this.evaluateForm.indicators.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.evaluateForm.validate(valid => {
        if (valid) {
          // TODO: 提交评估信息
          this.$message.success('培训评估提交成功')
          this.$router.push('/main/renshi/peixun/process')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-evaluate {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .evaluate-section {
    margin-bottom: 20px;
  }

  .indicator-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
 
 
 
 